<template>
    <div class="home-categories">
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
        <NuxtLink
          v-for="category in categories"
          :key="category.id"
          :to="`/products?category=${category.slug}`"
          class="card text-center shadow-md hover:shadow-lg transition-all group"
        >
          <div 
            :class="category.icon"
            class="text-4xl mb-3 text-primary-600 group-hover:scale-110 transition-transform"
          />
          <h3 class="font-medium mb-1">{{ category.name }}</h3>
          <p class="text-sm text-gray-500">{{ category.count }} 个项目</p>
        </NuxtLink>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  const categories = [
    { id: 1, name: '前端项目', slug: 'frontend', icon: 'i-mdi-vuejs', count: 156 },
    { id: 2, name: '后端项目', slug: 'backend', icon: 'i-mdi-nodejs', count: 132 },
    { id: 3, name: '全栈项目', slug: 'fullstack', icon: 'i-mdi-application', count: 89 },
    { id: 4, name: '移动开发', slug: 'mobile', icon: 'i-mdi-cellphone', count: 67 },
    { id: 5, name: '小程序', slug: 'miniapp', icon: 'i-mdi-wechat', count: 54 },
    { id: 6, name: '游戏开发', slug: 'game', icon: 'i-mdi-gamepad', count: 32 },
  ]
  </script>